<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="65%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="160px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
        :rules="rule"
      >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="经销商公司名称" prop="company">
              <el-input
                type="textarea"
                v-model.trim="createForm.company"
                placeholder="请输入经销商公司名称"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="省份" prop="province">
              <el-input
                v-model.trim="createForm.province"
                placeholder="请输入省份"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城市" prop="city">
              <el-input
                v-model.trim="createForm.city"
                placeholder="请输入城市"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile">
              <el-input
                v-model.trim="createForm.mobile"
                placeholder="请输入手机号码"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="座机" prop="phone">
              <el-input
                v-model.trim="createForm.phone"
                placeholder="请输入座机"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="QQ" prop="qq">
              <el-input
                v-model.trim="createForm.qq"
                placeholder="请输入QQ"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model.trim="createForm.email"
                placeholder="请输入邮箱"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="网址" prop="url">
              <el-input
                v-model.trim="createForm.url"
                placeholder="请输入网址"
                :disabled="title == '经销商详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { validatePhone, validEmail, validURL } from '@/utils/validate'
export default {
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    },
    brands: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      visible: true,
      createForm: {
        city: '',
        company: '',
        email: '',
        id: 0,
        mobile: '',
        page: 0,
        phone: '',
        province: '',
        qq: '',
        size: 0,
        supplierId: 0,
        url: '',
        username: ''
      },
      rule: {
        company: [
          { required: true, message: '请输入经销商公司名称', trigger: 'blur' }
        ],
        province: [{ required: true, message: '请输入省份', trigger: 'blur' }],
        city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        phone: [{ required: true, message: '请输入座机', trigger: 'blur' }],
        qq: [{ required: true, message: '请输入QQ', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: validEmail, trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入网址', trigger: 'blur' },
          { validator: validURL, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (this.row.id) {
      this.createForm = this.row
    }
  },
  mounted() {},
  methods: {
    confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('ok', this.createForm)
        }
      })
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less"></style>
